import PropTypes from "prop-types"
import React, { memo } from "react"

import { PageWrapper } from "./style"
import Pagination from "@mui/material/Pagination"
import Stack from "@mui/material/Stack"
import { useDispatch, useSelector } from "react-redux"
import { fetchRoomListAction } from "@/store/modules/entire/createActions"

const EntirePage = memo((props) => {
  const { currentPage, pageTotal, roomList } = useSelector((state) => ({
    currentPage: state.entire.currentPage,
    pageTotal: state.entire.pageTotal,
    roomList: state.entire.roomList,
  }))
  // 页码一定要向上取整
  const count = Math.ceil(pageTotal / 20)
  const startPage = currentPage * 20 + 1
  const endPage = (currentPage + 1) * 20 + 1

  const dispatch = useDispatch()
  function handleChange(event, value) {
    // dispatch(changeCurrentPageAction(value-1))

    // 点击页码 回到顶部
    window.scrollTo(0, 0)
    dispatch(fetchRoomListAction(value - 1))
  }
  return (
    <PageWrapper>
      {!!roomList.length && (
        <div className="page-content">
          <div className="pagination">
            <Stack spacing={2}>
              <Pagination
                count={count}
                color="primary"
                onChange={handleChange}
              />
            </Stack>
          </div>
          <div className="page-info">
            第 {startPage} - {endPage} 个房源，共超过 {pageTotal} 个
          </div>
        </div>
      )}
    </PageWrapper>
  )
})

EntirePage.propTypes = {}

export default EntirePage
